import React, { PureComponent } from 'react'
import { View, ScrollView, Text, StyleSheet, TouchableOpacity } from 'react-native'
import {connect} from 'react-redux'
import Table from './components/table'
import Spinner from 'react-native-loading-spinner-overlay'
import { createAction, NavigationActions } from '../../utils'
import screen from '../../utils/screen'
import { BILV_ONE,BILV_TWO,BILV_THREE,BILV_FOUR } from '../../utils/mock'


const DUBANG = [
  {
    title: {
      name: '杜邦分析'
    }
  }
];

@connect(({ home, rateanalyze, loading }) => ({ ...home, ...rateanalyze, isLoading: loading.models.rateanalyze}))
export default class extends PureComponent {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    const mainTime= this.props.mainTime;
    this.loadContent(mainTime.startTime, mainTime.endTime)
  }

  componentWillReceiveProps(nextProps) {
    const mainTime= this.props.mainTime;
    const nextMainTime = nextProps.mainTime;
    console.log('rate analyze receive props.')
    if(nextMainTime.startTime === undefined || nextMainTime.endTime === undefined) {
      return false
    }
    if(nextMainTime.startTime !== mainTime.startTime || nextMainTime.endTime !== mainTime.endTime) {
      this.loadContent(nextMainTime.startTime, nextMainTime.endTime)
    }
  }

  loadContent = (startT, endT) => {
    this.props.dispatch(createAction("rateanalyze/getRateDetailMsg")({
      startTime: startT,
      endTime: endT
    }))
  }

  render() {
    const { mainTime, dqczDetail, cqczDetail, yyDetail, ylDetail, isLoading } = this.props;
    const titleContent = {
      name: '类目',
      amount: '数值',
      yoy: '上年同期',
      qoq: '上期',
    }
    return (
      <Table onPullRelease={() => {
        this.loadContent(mainTime.startTime, mainTime.endTime)
      }}>
        <Spinner visible={isLoading} />
        <Table.Title title={titleContent}/>
        <Table.Body>
          <View style={{justifyContent: 'center', backgroundColor: 'white', height: screen.pxToDp(100), paddingLeft: screen.pxToDp(30)}}>
            <TouchableOpacity onPress={() => { this.props.navigation.navigate('RateAnalyzeStack', {initTime: mainTime})}}>
              <Text style={{color: 'red',textDecorationLine: 'underline'}} numberOfLines={1}>杜邦分析</Text>
            </TouchableOpacity>
          </View>
          <Table.WhiteSpace />
          <Table.Accordion
            sections={dqczDetail}
            navigation={this.props.navigation}
            timeD={mainTime}
          />
          <Table.WhiteSpace />
          <Table.Accordion
            sections={cqczDetail}
            navigation={this.props.navigation}
            timeD={mainTime}
          />
          <Table.WhiteSpace />
          <Table.Accordion
            sections={yyDetail}
            navigation={this.props.navigation}
            timeD={mainTime}
          />
          <Table.WhiteSpace />
          <Table.Accordion
            sections={ylDetail}
            navigation={this.props.navigation}
            timeD={mainTime}
          />
        </Table.Body>
      </Table>
    )
  }
}
